<template>
	<div class="transfer-wrapper">
		关联专题
		<el-transfer
			style="text-align: left;margin-bottom:60px;"
			:data="subjectData"
			:props="{label:'title',key:'id'}"
			filterable
			filter-placeholder="请输入专题名称"
			:titles="['待选择','已选择']"
			v-model="subjectValueList"
		>
			
		</el-transfer>
		关联优选
		<el-transfer
			style="text-align: left;"
			:data="prefrenceAreaList"
			:props="{label:'name',key:'id'}"
			filterable
			filter-placeholder="请输入优选名称"
			:titles="['待选择','已选择']"
			v-model="prefrenceAreaValueList"
		>
			
		</el-transfer>
		<el-button type="primary" @click="handleSubmit"> 完成,提交商品</el-button>
	</div>
</template>

<script>
	import {subjectList,prefrenceAreaList,productAdd,productEditTo} from "@/api/product.js"
	import Vuex from 'vuex'
	let mapState = Vuex.mapState;
	export default{
		data(){
			
				return{
					subjectData:[],
					prefrenceAreaList:[],
					subjectValueList:[],
					prefrenceAreaValueList:[]
				}
		},
		mounted() {
			subjectList().then(resp=>this.subjectData=resp.data.data)
			prefrenceAreaList().then(resp=>this.prefrenceAreaList=resp.data.data)
		},
		methods:{
			handleSubmit(){
				
				let prrList = [];
				this.prefrenceAreaList.forEach(p=>{
					prrList.push({"prefrenceAreaId":p.id})
				})
				this.productAddData.prefrenceAreaProductRelationList = prrList;
				
				let pspList = [];
				this.subjectValueList.forEach(p=>{
					pspList.push({"subjectId":p});
				})
				this.productAddData.subjectProductRelationList = pspList;
				
				//处理serviceIds
				// console.log(this.productAddData.serviceIds,",,");
				// this.productAddData.serviceIds = this.productAddData.serviceIds.join(",");
				this.productAddData.serviceIds="1,2";
				
				//我要提交数据咯
				//我到底是要新增呢，还是要修改呢
				if(this.productAddData.id>0){
					//修改
					productEditTo(this.productAddData.id,
						this.productAddData
					)
					.then(resp=>{
						if(resp.data.code == 200){
							//ok了，重新跳转到商品列表页面
							this.$router.push("/product/product/list");
						}
					})
				}else{
					// 添加操作
					//发送添加商品的请求
					productAdd(
						this.productAddData
					)
					.then(resp=>{
						if(resp.data.code == 200){
							//ok了，重新跳转到商品列表页面
							this.$router.push("/product/product/list");
						}
					})
				}
				
			}
		},
		computed:{
			...mapState(["activeProductAddStep","productAddData"]),
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.transfer-wrapper{
		// border:10px solid red;
		padding-left:50px;
		margin-top:50px;
	}
</style>
